import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1


Rectangle {
    width: 360;
    height: 400
    color: "#EEEEEE"

    Component{
        id:viewMode;

        ListModel{
            ListElement{
                name:"iPhone4s"
                cost:"1400";
                manufactory:"Apple";
            }
            ListElement{
                name:"iPhone5s"
                cost:"2400";
                manufactory:"Apple";
            }
            ListElement{
                name:"P8"
                cost:"2000";
                manufactory:"HuaWei";
            }
            ListElement{
                name:"P9"
                cost:"2600";
                manufactory:"HuaWei";
            }
        }
    }

    Component{
        id:viewDelegate;

        Item{
            id:wrapper;
            width: parent.width;
            height: 30;

            ListView.onAdd:{
                console.log("count:",ListView.view.count);
            }

            MouseArea{
                anchors.fill: parent;
                onClicked: wrapper.ListView.view.currentIndex = index;
            }

            RowLayout{
                anchors.left: parent.left;
                anchors.verticalCenter: parent.verticalCenter;
                spacing: 8;

                Text{
                    id:col1;
                    text:name;

                    elide: Text.ElideRight;

                    color: wrapper.ListView.isCurrentItem?"red":"black";
                    font.pixelSize: wrapper.ListView.isCurrent?22:18;
                    Layout.preferredWidth: 80;
                }

                Text{
                    text:cost;

                    color: wrapper.ListView.isCurrentItem?"red":"black";
                    font.pixelSize: wrapper.ListView.isCurrent?22:18;
                    Layout.preferredWidth: 80;
                }

                Text{
                    text:manufactory;

                    color: wrapper.ListView.isCurrentItem?"red":"black";
                    font.pixelSize: wrapper.ListView.isCurrent?22:18;
                    Layout.fillWidth: true;
                }
            }
        }
    }

    Component{
        id:sectionHeader

        Rectangle{
            width: parent.width;
            height: 40;
            color: "lightsteelblue";

            Text{
                text:section;
                font.bold: true;
                font.pixelSize: 20;
            }

        }
    }

    ListView{
        id:listView;
        anchors.fill: parent;
        delegate: viewDelegate;
        model: viewMode.createObject(listView);
        focus:true;
        highlight: Rectangle{
            color: "lightblue";
        }

        section.property: "manufactory";
        section.criteria: ViewSection.FullString;
        section.delegate: sectionHeader;

    }

}

